{% extends 'base_tabler.html' %} {% block navname %}religious{% endblock %}{% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">青少年宗教信仰分析</h2>
        <div class="text-muted mt-1">基于调查数据的青少年宗教信仰分布与影响因素分析</div>
      </div>
    </div>
  </div>
</div>

<!-- 宗教信仰分布图表 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">宗教信仰分布</h3>
      </div>
      <div class="card-body">
        <div id="religion_chart" style="width: 100%; height: 400px">{{ religion_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">宗教信仰占比</h3>
      </div>
      <div class="card-body">
        <div id="religion_pie_chart" style="width: 100%; height: 400px">{{ religion_pie_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 年龄分布与社交活跃度关系 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">不同年龄段宗教信仰分布</h3>
      </div>
      <div class="card-body">
        <div id="age_religion_chart" style="width: 100%; height: 400px">{{ age_religion_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">宗教信仰与社交活跃度关系</h3>
      </div>
      <div class="card-body">
        <div id="social_religion_chart" style="width: 100%; height: 400px">{{ social_religion_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 影响因素雷达图 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">宗教信仰影响因素分析</h3>
      </div>
      <div class="card-body">
        <div id="religion_influence_chart" style="width: 100%; height: 500px">{{ religion_influence_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 宗教信仰洞察 -->
<div class="row mt-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">青少年宗教信仰研究洞察</h3>
      </div>
      <div class="card-body">
        {% for insight in religion_insights %}
        <div class="mb-4">
          <h4 class="card-subtitle mb-2 text-primary">{{ insight.title }}</h4>
          <p class="text-muted">{{ insight.content }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}
